<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态添加,删除表格记录</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style>
        #employeeTable{
            border: 1px solid #cccccc;
            width: 500px;
            text-align: center;
            border-collapse: collapse;
            margin-top: 50px;
        }
        #employeeTable td,th{
            border: 1px solid #cccccc;
        }
    </style>

    <script type="text/javascript">

        $(function (){
            //创建一个用于复用的删除的function函数
            var deleteFun = function(){
                //alert("删除操作的function:" + this);
                //通过a查找到父节点td的父节点tr

                //在事件响应的function函数中,有一个this对象，这个this对象是当前在响应事件的dom对象
                var $trObj = $(this).parent().parent();
                //查找到当前人的姓名
                var name = $trObj.find("td:first").text();
                /*
                * confirm是javascript语言提供的一个确认提示框函数,你给他传什么,他就显示什么<br/>
                * 当用户点击了确定,就返回true，当用户点击了取消,就返回false
                * */
                if(confirm("你确定要删除["+name+"]吗？")){
                    $trObj.remove();
                };
                //return false; 可以阻止元素的默认行为
                return false;
            }

            //给submit按钮 绑定点击事件
            $("#addEmpButton").click(() => {
                //获取输入框,姓名,邮箱,工资的内容
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();

                //创建一个行标签对象,添加到显示数据的表格中
                var $trObj = $(`<tr>\n" +
                    "        <td>${name}</td>\n" +
                    "        <td>${email}</td>\n" +
                    "        <td>${salary}</td>\n" +
                    "        <td><a href=\"deleteEmp?id=003\">Delete</a></td>\n" +
                    "    </tr>`);

                //因为删除的元素默认情况下是在页面加载完成之后才能响应事件,而这里是动态添加的元素，所以在添加元素的时候
                //要将事件加上
                //给添加的行的a标签加上绑定事件
                $trObj.find("a").click(deleteFun);
                //添加到显示数据的表格中
                $trObj.appendTo($("#employeeTable"));
            });

            //给删除的a标签绑定点击事件
            //function(){}  和   $(() => {})  是不一样的  作用域
            //这里点击之后是调用这个函数
            $("a").click( deleteFun );




        })

    </script>

</head>
<body>
<p id="text_show">

</p>

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>Tom@qq.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>Jerry@qq.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>Bob@qq.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>

        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>

        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>

        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>

        </tr>
    </table>


</div>

</body>
</html>